<template>
  <div class="register">
    <!--  -->
    <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    <!--  -->
    <el-form :model="form">
    <el-form-item>
      <el-input v-model="formVal.tel" placeholder="请输入手机号" clearable />
    </el-form-item>
    <el-form-item>
      <el-input type="password" v-model="formVal.pass" placeholder="请输入密码" show-password />
    </el-form-item>
    <el-form-item>
      <el-input type="password" v-model="formVal.pass" placeholder="确认密码" show-password />
    </el-form-item>
    </el-form>
    <!--  -->
    <el-button type="primary" @click="handleGoRegister">注册</el-button>
    <div class="account" @click="handleGoLogin">已有账号登录</div>
  </div>
</template>

<script>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
export default {
  name: 'Login',
  setup () {
    const router = useRouter()
    const formVal = reactive({ tel: '', pass: '' })
    // 点击登录按钮 跳转到首页
    const handleGoLogin = () => {
      router.push('/login')
    }
    return { formVal, handleGoLogin }
  }
}
</script>

<style lang="scss" scoped>
.register {
  position: absolute;
  top: 50%;
  left:0;
  right: 0;
  transform: translateY(-50%);
  margin: 0 .8rem;
  .el-avatar {
    display: block;
    margin: 0 auto .4rem auto;
    width: 0.66rem;
    height: 0.66rem;
  }
  .el-button {
    position: relative;
    top: -.5rem;
    width: 100%;
  }
  .account {
    position: relative;
    top: -.5rem;
    font-size: .15rem;
    text-align: center;
  }
}
</style>
